<template>
	<div class="person__top" v-if="data">
		<div class="person__top--header" :class="{small: small}" @click="clickHeader">
			<img :src="data.head" alt="header" />
		</div>
		<div class="person__top--introduce" :class="{small: small}" >
			<div class="name" @click="clickHeader">
				{{data.name}}<i class="iconfont icon-chongwu" v-if="data.student"></i>
			</div>
			<div class="time">{{time}}</div>
		</div>
		<div class="person__top--price" v-if="data.money&&isHelp">报偿{{data.money}}元</div>
		<div class="person__top--price" v-else-if="data.money">¥{{data.money}}</div>
	</div>
</template>

<script>
	export default {
		created() {

		},
		props: {
			data: {
				type: Object //包括name,time,money,id
			},
			small: {
				type: Boolean //是否是小的头像陪名字组合，用于留言面板的小的用户头像
			}
		},
		methods: {
			clickHeader() {
				const id = this.data.id;
				this.$emit("getUserInfo", id);
			}
		},
		computed: {
			time() {
				const show = [];
				var old = this.data.time;
				var diff = (Date.now() - old)/1000;
				if ( diff <= 60 ) {
					return "刚刚";
				}else if (  diff <= 60*60 ) {
					return `${ parseInt(diff/60) }分钟前`;
				}else if ( diff <= 60*60*24 ) {
					return `${ parseInt(diff/3600) }小时前`;
				}else if ( diff <= 60*60*24*30 ) {
					return `${ parseInt( diff/(3600*24) ) }天前`;
				}else if ( diff <= 60*60*24*30*12 ) {
					return `${ parseInt(diff/(3600*24*30) )}月前`;
				}else {
					return `${ parseInt(diff/(3600*24*30*12)) }年前`;
				}
				return 1;
			},
			isHelp() {
				return this.$parent.isHelp;
			}
		}
	}
</script>

<style scoped lang="scss">
	.person__top {
		display: flex;
	}

	.person__top--header {
		@include round-header;
	}
	/*小头像(用在留言面板)*/
	.person__top--header.small {
		@include round-header-small;
	}
	.person__top--introduce {
		margin-left: rem(12);
		flex: 1;
		display: flex;
		flex-direction: column;
		.name {
			@include text-overflow;
			width: rem(120);
			font-size: $font-sm;
			flex: 1;
			vertical-align: middle;
			i {
				vertical-align: middle;
				color: $blue-light;
				margin-left: rem(3);
			}
		}
		.time {
			color: $gray-light;
			font-size: $font-xs;
		}
	}
	/*小头像小文字(用在留言面板)*/
	.person__top--introduce.small {
		margin-left: rem(7);
		.name {
			font-size: $font-xs;
		}
		
	}
	.person__top--price {
		font-size: $font-sm;
		color: $color-money;
		font-weight: bold;
	}
</style>